<template>
	<view class="register">
		<view class="status_bar_h" :style="{
				height: `${statusBarHeight}px`,
				backgroundColor: '#20BF6C',
			}"></view>
		<view class="img_box">
			<!-- <swiper
				style="height: 400rpx"
				circular
				:indicator-dots="false"
				:autoplay="true"
				:interval="2000"
				:duration="500">
				<swiper-item
					v-for="(item, key) in src"
					:key="key">
					<view class=""
						><image
							style="width: 100%; height: 400rpx"
							mode="aspectFill"
							:src="item"></image
					></view>
				</swiper-item>
			</swiper> -->
			<image style="width: 100%; height: 400rpx" mode="aspectFill" :src="src"></image>
			<view class="back" @click="back">
				<image src="/static/images/arrow-left.png" mode="widthFix"></image>
				<text>返回</text>
			</view>
		</view>
		<view class="main">
			<view class="title">ONE桌遊自助繳費系統</view>
			<view class="sd_title">註冊</view>
			<view class="form">
				<view class="user_name">
					<up-input v-model="form.user_name" type="number" color="#39B19D" shape="circle" :customStyle="{
							border: '2rpx solid #39B19D!important',
						}" placeholder="请输入10位有效手机号">
						<template #prefix>
							<up-text text="+886" color="#39B19D"></up-text>
						</template>
					</up-input>
				</view>
				<view class="user_code">
					<up-input v-model="form.user_code" type="number" color="#39B19D" shape="circle" :customStyle="{
							border: '2rpx solid #39B19D!important',
						}" placeholder="請輸入手機驗證碼">
						<template #suffix>
							<up-button v-if="!disabled" @tap="getCode" :text="changeText" :disabled="disabled"
								color="#39B19D" size="mini"></up-button>
							<view v-else class="start_count_down">
								<u-count-down :time="countDown*1000" format="ss"></u-count-down>
								<text style="font-size: 26rpx;color:#000;margin-left: 5rpx;">S</text>
							</view>
						</template>
					</up-input>
				</view>
				<view class="user_pass">
					<up-input v-model="form.user_pass" type="number" color="#39B19D" shape="circle" :customStyle="{
							border: '2rpx solid #39B19D!important',
						}" placeholder="請設置登入密碼"></up-input>
				</view>
				<view class="user_pass">
					<up-input v-model="form.invite_code" type="text" color="#39B19D" shape="circle" :customStyle="{
							border: '2rpx solid #39B19D!important',
						}" placeholder="邀請碼"></up-input>
				</view>
			</view>
			<view class="btn_wrap">
				<view class="btn_box" @click="toRegister">確認註冊</view>
			</view>
			<view class="deal">
				<checkbox-group @change="isChecked = !isChecked">
					<label>
						<checkbox color="#39B19D" outline="#39B19D" class="deal_check" :checked="isChecked" />
						<text class="text">我也閲讀并同意《登入協議》《隱私協議》</text>
					</label>
				</checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	import useStore from '@/store/index.js';
	import baseURL from '@/utils/baseURL.js';
	import {
		ref
	} from 'vue';
	import {
		getCode,
		userRegister
	} from '@/api/index.js'
	export default {
		data() {
			return {
				src: [],
				baseURL,
				isChecked: false,
				disabled: false,
				changeText: '獲取驗證碼',
				form: {},
				statusBarHeight: 0, // 顶部状态栏高度
				bthHeight: 0, // 底部按钮高度
				list: [],
				scrollTop: 0,
				old: {
					scrollTop: 0,
				},
				countDown: 60,
			};
		},
		onLoad() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// const screenTop = uni.getSystemInfoSync().safeArea.top;
			// const screenBot = uni.getSystemInfoSync().safeArea.bottom;
			this.bthHeight = uni.getSystemInfoSync().screenHeight - (1000 - 40) / 2;
			// console.log('uni.getSystemInfoSync()', uni.getSystemInfoSync());
			// console.log('this.bthHeight', this.bthHeight);
			// console.log('screenTop', screenTop);
			// console.log('screenBot', screenBot);
			// const token = JSON.parse(uni.getStorageSync('token'))
			// 	? JSON.parse(uni.getStorageSync('token'))
			// 	: ''; // 1 店家 2商家
			// if (!token) {
			// 	uni.navigateTo({
			// 		url: '/pages/login/login',
			// 	});
			// } else {
			// }
			this.setSwiperImg();
		},
		methods: {
			setSwiperImg() {
				const equipmentOptions = JSON.parse(
					uni.getStorageSync('equipmentOptions')
				);
				// console.log('equipmentOptions', equipmentOptions.imagejh);
				// const _src = equipmentOptions.imagejh ?
				// 	equipmentOptions.imagejh.split(',') :
				// 	[];
				// if (_src.length > 1) {
				// 	this.src = _src.map(item => baseURL + item);
				// } else if (_src.length === 1) {
				// 	this.src = [baseURL + _src[0]];
				// }

				this.src = baseURL + equipmentOptions.image2
			},
			submit() {
				if (this.isChecked) {
					if (this.checkForm()) {
						const params = {
							user_name: this.form.user_name,
							user_pass: this.form.user_pass,
						};
						login(params)
							.then(res => {
								uni.showToast({
									title: '成功',
									duration: 1000,
								});
							})
							.catch(err => {
								uni.showModal({
									title: '系統提示',
									content: `登入失敗，原因${err}`,
								});
							});
					} else {
						uni.showModal({
							title: '系統提示',
							content: '請檢查是否填寫',
						});
					}
				} else {
					uni.showToast({
						title: '請勾選協議',
						duration: 1000,
					});
				}
			},
			phoneChange(e) {},
			getCode() {
				const uCodeRef = ref(null);
				// console.log('uCodeRef', uCodeRef);
				// this.changeText = '請60秒之後重新獲取';

				// if (uCodeRef.canGetCode) {
				// 	// 模拟向后端请求验证码
				// 	uni.showLoading({
				// 		title: '正在獲取驗證碼',
				// 	});
				// 	// setTimeout(() => {
				// 	// 	uni.hideLoading();
				// 	// 	// 这里此提示会被start()方法中的提示覆盖
				// 	// 	uni.$u.toast('驗證碼已發送');
				// 	// 	// 通知验证码组件内部开始倒计时
				// 	// 	uCodeRef.start();
				// 	// }, 2000);
				// } else {
				// 	this.disabled = true;
				// 	uni.$u.toast('倒計時結束后在發送');
				// }
				// getCode({
				// 	code_type: 'register',
				// 	mobile: this.form.user_name
				// }).then(res => {
				// 	this.disabled = true;
				// 	uni.showToast({
				// 		title: '正在發送驗證碼',
				// 		icon: 'success'
				// 	})
				// 	setTimeout(() => {
				// 		this.disabled = false;
				// 	}, 60 * 1000)
				// })

				uni.request({
					url: baseURL + `/api/login/code`,
					data: {
						code_type: 'register',
						mobile: this.form.user_name
					},
					method: 'POST',
					success: (res) => {
						// console.log(res.data, '获取验证码')
						if (res.data.code == 1) {
							uni.showToast({
								title: res.data.msg,
								icon: 'success'
							})
							this.disabled = true;
							setTimeout(() => {
								this.disabled = false;
							}, 60 * 1000)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			checkForm() {
				const {
					user_name,
					user_pass
				} = this.form;
				return user_name && user_pass ? true : false;
			},
			toRegister() {
				// uni.navigateTo({
				// 	url: '/pages/register/register'
				// });

				console.log(this.form, '注册')

				if (this.form.user_name == '') {
					uni.showToast({
						title: '請輸入手機號',
						icon: 'none'
					})
					return
				} else if (this.form.user_code == '') {
					uni.showToast({
						title: '請輸入驗證碼',
						icon: 'none'
					})
					return
				} else if (this.form.user_pass == '') {
					uni.showToast({
						title: '請輸入密碼',
						icon: 'none'
					})
					return
				} else if (!this.isChecked) {
					uni.showToast({
						title: '請勾選協議',
						icon: 'none'
					})
					return
				}

				const params = {
					mobile: this.form.user_name,
					code: this.form.user_code,
					password: this.form.user_pass,
					password_confirm: this.form.user_pass,
					invite_code: this.form.invite_code
				}
				// userRegister(params).then(res => {
				// 	uni.showToast({
				// 		title: '註冊成功',
				// 		icon: 'success',
				// 		duration: 2000
				// 	})
				// 	setTimeout(() => {
				// 		uni.reLaunch({
				// 			url: '/pages/login/login'
				// 		})
				// 	}, 2000)
				// })

				uni.request({
					url: baseURL + `/api/login/register`,
					data: {
						...params
					},
					method: 'POST',
					success: (res) => {
						// console.log(res, '注册')
						if (res.data.code == 200 || res.data.code == 1) {
							uni.showToast({
								title: '註冊成功',
								icon: 'success',
								duration: 2000
							})
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/login/login'
								})
							}, 2000)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			back() {
				uni.reLaunch({
					url: '/pages/menu/menu'
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.register {
		height: 100%;

		.img_box {
			// padding: 40rpx 40rpx 0;
			position: relative;

			.back {
				position: fixed;
				left: 10rpx;
				bottom: 30rpx;
				display: flex;
				align-items: center;
				color: #fff;
				background-color: #ff914d;
				padding: 5rpx 10rpx;
				border-radius: 20rpx;

				image {
					width: 50rpx;
					margin-right: 10rpx;
				}
			}
		}

		.main {
			padding: 40rpx 40rpx 0;
			text-align: center;
			color: $uni-color-green;

			.title {
				font-size: 36rpx;
			}

			.sd_title {
				height: 100rpx;
				line-height: 100rpx;
				font-size: 50rpx;
			}

			.form {
				position: relative;
				padding-bottom: 120rpx;

				.input {
					border: 2rpx solid $uni-color-green;
				}

				.input {
					border: 2rpx solid $uni-color-green;
				}

				.input:focus {
					border: 2rpx solid $uni-color-green;
				}

				.input:focus {
					border: 2rpx solid $uni-color-green;
				}

				.user_name {
					margin-bottom: 20rpx;
				}

				.user_code,
				.user_pass {
					margin-bottom: 20rpx;
				}

				.checkout_btn {
					position: absolute;
					right: 20rpx;
					bottom: 60rpx;
					font-size: 24rpx;
				}
			}

			.btn_wrap {
				display: flex;
				justify-content: space-around;

				.btn_box {
					width: 140rpx;
					padding: 10rpx;
					text-align: center;
					border-radius: 10rpx;
					color: #fff;
					background-color: $uni-color-green;
				}
			}

			.deal {
				padding: 80rpx 20rpx 20rpx;
				font-size: 24rpx;

				::v-deep .uni-checkbox-input {
					border-color: $uni-color-green;
					border-radius: 50%;
					vertical-align: middle;
				}

				.text {
					vertical-align: middle;
				}
			}
		}
	}

	.start_count_down {
		display: flex;
		align-items: center;
	}
</style>